<template>
    <el-pagination
      :currentPage="props.currentPage"
      :page-size="props.pageSize"
      :page-sizes="[1, 2, 3, 4]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
import { defineProps, PropType, defineEmits } from 'vue'
const props = defineProps({
  currentPage: {
    types: Number,
    default: 5
  },
  total: {
    types: Number,
    default: 1
  },
  pageSize: {
    types: Number,
    default: 1
  },
  loadList: {
    types: Function,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {}
  }
})
interface IEmit{
    (event:'update:currentPage', currentPage:number):void
    (event:'update:total', total:number):void
    (event:'update:pageSize', pageSize:number):void
}
const emit = defineEmits<IEmit>()
function handleSizeChange (pageSize:number) {
  emit('update:pageSize', pageSize)
  props.loadList()
}
function handleCurrentChange (currentPage:number) {
  emit('update:currentPage', currentPage)
  props.loadList()
}

</script>

<style scoped>

</style>
